import { NavBar, Toast } from 'react-vant';
import { Button } from 'react-vant';
import Hus from '../../css/Lsz/hxs.module.css'
import { Popup, Cell } from 'react-vant'
import React, { useRef, useEffect, useState, act } from 'react';
// import {} from '../../store/modoles/cart'
import { useSelector } from 'react-redux'
import {useNavigate} from 'react-router-dom'
import { alert } from 'antd-mobile/es/components/dialog/alert';
import axios from 'axios';
axios.defaults.baseURL='http://localhost:3000/indd/'
function App() {
    // let sd = useSelector(()=>)
    const canvasRef = useRef( null );
    let canvas;
    let navigate = useNavigate()
    let ctx;//创建画布
    const drawOnCanvas = () => {
        canvas = canvasRef.current;
        ctx = canvas.getContext( '2d' );//创建画布
        ctx.fillStyle = 'rgb(178, 185, 188)';
        // 红线 坐标轴
        ctx.beginPath();
        ctx.strokeStyle = 'red'
        ctx.moveTo( 40, 10 );
        ctx.lineTo( 40, 285 );
        ctx.lineWidth = 1;
        ctx.stroke();
        //灰色线条
        ctx.beginPath();
        ctx.strokeStyle = 'grey';
        ctx.moveTo( 20, 285 );
        ctx.lineTo( 450, 285 );
        ctx.lineWidth = 1;
        ctx.stroke();
        // 地板
        // ctx.beginPath();
        // ctx.strokeStyle = 'grey';
        // ctx.moveTo( 580, 290 );
        // ctx.lineTo( 25, 290 );
        // ctx.lineTo( 20, 590 );
        // ctx.lineTo( 580, 590);
        // ctx.closePath();
        // // 设置填充颜色
        // ctx.fillStyle = 'rgb(98, 98, 98)';
        // // 填充形状
        // ctx.fill();

        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.rect( 270, 50, 130, 230 );
        // 上门直线
        ctx.moveTo( 430, 10 );
        ctx.lineTo( 240, 10 );
        // 斜线左
        ctx.moveTo( 240, 10 );
        ctx.lineTo( 270, 50 );
        // 直线左
        ctx.moveTo( 240, 10 );
        ctx.lineTo( 240, 280 );
        // 斜线右边
        ctx.moveTo( 430, 10 );
        ctx.lineTo( 400, 50 );
        // 直线右边
        ctx.moveTo( 430, 10 );
        ctx.lineTo( 430, 280 );
        ctx.lineWidth = 1;
        ctx.stroke();
    };
    useEffect( () => {
        drawOnCanvas();
    }, [] );
    // 封装添加线条的函数
    // x和y是起始点，x1和y1是结束点，textx1和texty2是文字的位置
    function Line( x, y, x1, y1, textx1, texty1, text ) {
        // 获取画布
        canvas = canvasRef.current;
        ctx = canvas.getContext( '2d' );//创建画布
        ctx.beginPath();// 创建图像
        ctx.moveTo( x, y );// 起始点
        ctx.lineTo( x1, y1 );// 结束点
        ctx.strokeStyle = 'red'; // 线条的颜色
        ctx.lineWidth = 2;// 线条的宽度
        ctx.font = '16px Arial';// 线条上的字体
        ctx.fillStyle = 'rgb(0,0,0)';  // 字体的颜色
        ctx.fillText( getCout + text, textx1, texty1 );
        ctx.stroke();
    }
    // 门洞左边距
    function rights() {
        Line( 37, 80, 242, 80, 150, 70, '左边距' )
    }
    // 厚度测量
    function lefts() {
        Line( 240, 120, 270, 160, 240, 122, '厚度' )
    }
    // 测量宽度
    function thickness() {
        Line( 37, 200, 270, 200, 150, 230, '宽度' )
    }
    // 测量高度
    function heights() {
        Line( 275, 50,
            275, 280, 285, 230, '高度' )
    }
    //   左右边距表
    let margins = [
        '右边距', '厚度', '宽度', '高度'
    ]

    // 计算的表格
    let countTable = [
        1, 2, 3, '退格', '上一步', 4, 5, 6, 0, '下一步', 7, 8, 9, '确认', '取消', '.'
    ]
    //   切换导航条
    let [ uptext, setUptext ] = useState( 0 )
    // 计算的逻辑
    // 计算获取的数值
    let [ getCout, setGetcount ] = useState( '' )
    const [ visible, setVisible ] = useState( false )
    // 测量完成的中数据
    let [ complete, setComplete ] = useState( [] )
    // 将输入的数据保存到数据路
    // 传输后端数据、
    let token = JSON.parse(localStorage.getItem('accessToken'))
    function cdata() {
        axios.post( '/door', complete, {
            headers: { 'Authorization': `Bearer ${token}` }
        } ).then( ( res ) => {
            console.log( res );

        } )
    }
    let coutjs = ( i ) => {
        let s = [ ...complete ]
        // 点击确定的生成线条
        if ( i == '确认' ) {
            if ( uptext == 0 ) {
                rights()
                s.push( {name:"右边距",datas:getCout,types:"门"})
            }
            if ( uptext == 1 ) {
                lefts()
                s.push( {name:"厚度",datas:getCout,types:"门"})
            }
            if ( uptext == '2' ) {
                thickness()
                s.push( {name:"宽度",datas:getCout,types:"门"})
            }
            if ( uptext == '3' ) {
                heights()
                s.push( {name:"高度",datas:getCout,types:"门"})
            }
            console.log( s );
            setComplete( complete = s )
        }
        // 添加测量完成的数据
        // 将数字叠加起来
        if ( typeof ( i ) === 'number' || i == '.' ) {
            setGetcount( getCout => getCout += i )
        }
        if ( i === '退格' ) {
            let sde = getCout.length
            setGetcount( getCout => getCout.substr( 0, sde - 1 ) )
        }
        if ( i == '上一步' ) {
            if ( uptext > 0 ) {
                setUptext( uptext => uptext - 1 )
            }
            setGetcount( '' )
        }
        if ( i == '下一步' ) {
            if ( uptext < margins.length - 1 ) {
                setUptext( uptext => uptext + 1 )
            }
            if( uptext == margins.length - 1){
                setVisible( true )
                cdata()
            }
            // if(uptext  ==  margins.length - 1 ){
            // }
            setGetcount( '' )
        }
        if ( i == '取消' ) {
            setGetcount( '' )
        }
    }
    // 保存画布到电脑上 
    const downloadCanvas = () => {
        //将canvas保存为base64位图片
        const imageUrl = canvasRef.current.toDataURL( "image/png" );
        const blob = base64ToBlob( imageUrl ); // 将base64位图片转换为Blob
        const link = document.createElement( "a" );
        link.href = URL.createObjectURL( blob );
        link.download = "sunflower.png";
        // 使用MouseEvent来创建一个新的点击事件，用dispatchEvent来触发这个事件
        const clickHandler = new MouseEvent( "click" );
        link.dispatchEvent( clickHandler );
    };

    //   将base64位图片转换为Blob
    const base64ToBlob = ( base64 ) => {
        const arr = base64.split( "," );
        const mime = arr[ 0 ].match( /:(.*?);/ )[ 1 ]; // 图片类型
        const bstr = atob( arr[ 1 ] ); // 把base64字符串转换为byte数组
        let n = bstr.length;
        const u8arr = new Uint8Array( n );
        while ( n-- ) {
            u8arr[ n ] = bstr.charCodeAt( n );
        }
        return new Blob( [ u8arr ], { type: mime } );
    };
    // 取消操作
    let cancel = ()=>{
        setVisible(false)
    }
    // 完成操作
    let clcomplete = ()=>{
        navigate('/window')
        setVisible(false)
        console.log(complete);
        
    }
    return (
        <div>
            {/* 弹出框 */ }
            <div>
                <Popup visible={ visible } onClose={ () => setVisible( false ) }>
                    <div style={ { width: "30rem", height: "15rem" } }>
                        <h3 className={ `${Hus.H3te}` }>提示</h3>
                        <div style={ { width: '80%', margin: '0.6rem auto', overflow: 'hidden', } }>
                            <h2 style={{color:"rgb(153, 153, 153)",lineHeight:"2.3rem"}}>
                                该的面积已经测量完成是否进行下一个测量目标
                            </h2>
                        </div>
                        <div style={ { width: '80%', margin: '0.6rem auto', overflow: 'hidden', display:'flex',justifyContent:'space-between'} }>
                            <Button onClick={()=>cancel()} style={{width:'10rem',height:"3rem"}} type='warning'>取消</Button>
                            <Button onClick={()=>clcomplete()}  style={{width:'10rem',height:"3rem"}} type='danger'>好的</Button>
                        </div>

                    </div>
                </Popup>
            </div>
            {/* 导航条 */ }
            <div>
                <NavBar
                    title="户型图"
                    leftText="保存"
                    rightText="..."
                    onClickLeft={ () => downloadCanvas() }
                />
            </div>
            <canvas ref={ canvasRef } className={ `${Hus.canv}` } width="600" height="600"></canvas>
            <div>
                {/* 左右边距 */ }
                <div className={ `${Hus.Farmargins}` }>
                    {
                        margins.map( ( item, index ) => {
                            return (
                                <p className={ `${Hus.margins}` }
                                    style={ {
                                        borderBottom: uptext == index ? '3px solid rgb(121, 121, 121)' : '',
                                        color: uptext == index ? 'rgb(60, 60, 60)' : ''
                                    } }
                                    key={ index } > { item }</p>
                            )
                        } )
                    }
                </div>
                {/* 计算出来的值 */ }
                <div className={ `${Hus.price}` }>
                    <p>{ getCout }</p>
                </div>
                <div className={ `${Hus.FacoutTabe}` }>
                    {
                        countTable.map( ( item, index ) => {
                            return (
                                <p onClick={ () => coutjs( item ) } className={ `${Hus.coutTabe}` } key={ index }>{ item }</p>
                            )
                        } )
                    }


                </div>

            </div>
        </div >
    )
}
export default App